<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/content/variable.jsp"%>
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<title>第三方直播后台</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- CSS -->
<link rel="stylesheet" href="http://resource.myche51.cn/content/login/css/reset.css">
<link rel="stylesheet" href="http://resource.myche51.cn/content/login/css/supersized.css">
<link rel="stylesheet" href="http://resource.myche51.cn/content/login/css/style.css">
<style media="screen">
canvas.J_codeimg {
	margin-top: 7%;
	margin-left: 1%;
	float: right;
}
</style>
</head>

<body oncontextmenu="return false">

	<div class="page-container">
		<h1>登录界面</h1>
		<form action="" method="post" >
			<div>
				<input type="text" name="username" class="username"
					placeholder="用户名" autocomplete="off" />
			</div>
			<div>
				<input type="password" name="password" class="password"
					placeholder="密码" oncontextmenu="return false"
					onpaste="return false" />
			</div>
			<div>
				<input type="text" id="J_codetext" name="myCanvasCheck"
					class="myCanvasCheck" placeholder="验证码,点击更换"
					oncontextmenu="return false" onpaste="return false"
					style="width: 55%;" />
				<canvas class="J_codeimg" id="myCanvas" onclick="createCode()"
					style="width: 33%;height= 35%;">对不起，您的浏览器不支持canvas，请下载最新版浏览器!</canvas>
			</div>
			<button id="submit" type="button">登录</button>
		</form>
		<!--  <div class="connect">
                <p>If we can only encounter each other rather than stay with each other,then I wish we had never encountered.</p>
			        	<p style="margin-top:20px;">如果只是遇见，不能停留，不如不遇见。</p>
            </div> -->
	</div>
	<div class="alert" style="display: none">
		<h2>消息</h2>
		<div class="alert_con">
			<p id="ts"></p>
			<p style="line-height: 70px">
				<a class="btn">确定</a>
			</p>
		</div>
	</div>

	<!-- Javascript -->
	<script src="http://resource.myche51.cn/content/login/js/jquery-1.6.4.min.js" type="text/javascript"></script>
	<script src="http://resource.myche51.cn/content/login/js/supersized.3.2.7.min.js"></script>
	<script src="http://resource.myche51.cn/content/login/js/supersized-init.js"></script>
	<script>
	
		$(".btn").click(function() {
			is_hide();
		})
		var u = $("input[name=username]");
		var p = $("input[name=password]");
		$("#submit").live('click', function() {
			//先校验验证码
			if (validate()) {
				//验证帐号密码
				if (u.val() == '' || p.val() == '') {
					$("#ts").html("用户名或密码不能为空~");
					is_show();
					document.getElementById("J_codetext").value = "";
					createCode();
					return false;
				} else {
					$.ajax({
						type:"post",
						async: false,
						url:"<%=path%>/login",
						data:{userName:u.val(),passWord:p.val()},
						dataType:"json",
						success: function(data){
							if(data.resc=="0001"){
								$("#ts").html("用户名或密码错误");
								is_show();
								document.getElementById("J_codetext").value = "";
								createCode();
								return false;
							}else{
								window.location.href="<%=path%>/index"
							}
						}
					});
				}
			}
		});

		function is_hide() {
			$(".alert").animate({
				"top" : "-40%"
			}, 300)
		}
		function is_show() {
			$(".alert").show().animate({
				"top" : "45%"
			}, 300)
		}

		//验证码
		function showCheck(a) {
			var c = document.getElementById("myCanvas");
			var ctx = c.getContext("2d");
			ctx.clearRect(0, 0, 1000, 1000);
			ctx.font = "80px 'Microsoft Yahei'";
			ctx.fillText(a, 0, 100);
			ctx.fillStyle = "white";
		}
		var code;
		function createCode() {
			code = "";
			var codeLength = 4;
			var selectChar = new Array(1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b',
					'c', 'd', 'e', 'f', 'g', 'h', 'j', 'k', 'l', 'm', 'n', 'p',
					'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B',
					'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P',
					'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z');
			for (var i = 0; i < codeLength; i++) {
				var charIndex = Math.floor(Math.random() * 60);
				code += selectChar[charIndex];
			}
			if (code.length != codeLength) {
				createCode();
			}
			showCheck(code);
		}
		//校验验证码
		function validate() {
			var inputCode = document.getElementById("J_codetext").value
					.toUpperCase();
			var codeToUp = code.toUpperCase();
			if (inputCode.length <= 0) {
				$("#ts").html("验证码不能为空~");
				is_show();
				//    document.getElementById("J_codetext").setAttribute("placeholder","杈撳叆楠岃瘉鐮�");
				createCode();
				return false;
			} else if (inputCode != codeToUp) {
				document.getElementById("J_codetext").value = "";
				//    document.getElementById("J_codetext").setAttribute("placeholder","楠岃瘉鐮侀敊璇�");
				$("#ts").html("验证码错误，请重新输入");
				is_show();
				createCode();
				return false;
			} else {
				//window.open(document.getElementById("J_down").getAttribute("data-link"));
				//document.getElementById("J_codetext").value="";
				//createCode();
				return true;
			}

		}

		window.onload = function() {
			/*	登录按钮下放信息条 动态出现
			$(".connect p").eq(0).animate({"left":"0%"}, 600);
				$(".connect p").eq(1).animate({"left":"0%"}, 400);
			 */
			createCode();
		}
		
		
	</script>
</body>
</html>
